<template>
	<view class="jianjie ">
		<view class="desc-box">
			<view class="item">
				<view class="title">
					统计学概论
				</view>
				<view class="tags-box flex flex-wrap">
					<view class="box">
						一级学科
					</view>
					<view class="box">
						社会统计学
					</view>
				</view>

				<scroll-view scroll-y="true" class="desc-text">
					<view v-html="pageData.desc"></view>
				</scroll-view>
			</view>
			<view class="bottom  flex">

				<view class="left basis-df">
					308次播放
				</view>
				<view class="right basis-df  flex justify-end">
					<view class="" @click="fn('favor')"
						:class="pageData.favor?'cuIcon-favorfill text-red':'cuIcon-favor '">

					</view>
					<view class="cuIcon-down" @click="fn('down')">

					</view>

					<view class="cuIcon-share" @click="fn('share')">

					</view>



				</view>

			</view>


		</view>
		<view class="auther">
			<view class="title">
				讲师
			</view>

			<view class="item flex ">
				<view class="headimg  round">
					<image :src="res+'/static/cloudClassroom/touxiang.png'" class="round" mode=""></image>
				</view>
				<view class="center   flex align-center flex-wrap">
					<view class="top">
						贺羽
						<text> 四川大学特约讲师</text>
					</view>
					<view class="bottom">
						2035人关注
					</view>

				</view>

				<view class="right  middle">
					<view class="buttom-item round middle" @click="fn('guanzhu')"
						:class="pageData.auther.isfollw?'follw':'nofollw'">
						{{pageData.auther.isfollw?'已关注':'关注ta'}}
					</view>
				</view>

			</view>

		</view>



		<view class="foot">

		</view>
	</view>


</template>

<script>
	export default {
		name: "jianjie",

		data() {
			return {
				res: this.apiHost + "/static/otherApp/",
				pageData: {
					favor: false,
					auther: {
						name: "贺羽",
						isfollw: false,
					},


					desc: `《统计学概论》根据经济、管理类专业的培养目标来设计《统计学概论》的内容体系。经济、管理类专业统计学教育的目的是：使学生具备基本的统计思想，掌握基本的统计方法，培养应用统计方法分析和解决经济管理中实际问题的能力。《统计学概论》对统计学中有关统计数据的收集、整理、显示、描述、推断和分析进行了系统的阐述。《统计学概论》适用于大专院校的本科学生及有关人员。`
				},




			}
		},
		methods: {
			fn(type) {
				switch (type) {
					case "favor":
						this.pageData.favor = this.pageData.favor ? false : true;
						break;
					case "down":
						uni.showToast({
							title: "该视频暂未提供下载",
							icon: "none"
						})
						break;
					case "share":
						uni.setClipboardData({
							data: '',
							success: function() {
								console.log('success');
							}
						});
						break;

					case "guanzhu":
						this.pageData.auther.isfollw = this.pageData.auther.isfollw ? false : true;

						break;


				}
			}


		}



	}
</script>

<style lang="scss" scoped>
	.jianjie {
		width: calc(100vw*(670/750));
		margin-left: calc(100vw*(40/750));

		.desc-box {
			width: inherit;
			padding-top: 50rpx;

			.item {
				font-family: PingFang SC;

				.title {
					font-size: 48rpx;
					font-weight: 800;
					color: #333333;
				}

				.tags-box {
					width: inherit;
					margin-top: 29rpx;

					.box {
						display: inline-block;
						background: rgba(18, 112, 224, 0.1);
						padding: 15rpx 30rpx;
						border-radius: 10rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: #1270E0;
						margin-right: 20rpx;
					}

				}

				.desc-text {
					max-height: calc(100vw*(280/750));
					margin-top: 37rpx;
					font-size: 24rpx;
					margin-bottom: 45rpx;
					font-weight: 500;
					color: #999999;

					view {
						line-height: calc(100vw*(40/750));
					}

				}

			}

			.bottom {
				width: inherit;
				height: calc(100vw*(100/750));
				margin-top: 20rpx;

				.left {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.right {
					view {
						font-size: 42rpx;
						margin-left: calc(100vw*(60/750));
					}
				}
			}


		}

		.auther {
			margin-top: 49rpx;

			.title {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #333333;
			}

			.item {
				margin-top: 41rpx;
				height: calc(100vw*(100/750));

				.headimg {
					width: calc(100vw*(100/750));
					height: inherit;

					image {
						width: inherit;
						height: inherit;
					}
				}

				.center {
					width: calc(100vw*(450/750));
					height: inherit;
					padding-left: 24rpx;

					.top {
						width: inherit;
						font-size: 28rpx;

						font-weight: 800;
						color: #333333;

						text {
							opacity: 0.5;
							margin-left: 15rpx;
						}
					}

					.bottom {
						font-size: 24rpx;
						font-weight: 500;
						color: #999999;
					}
				}

				.right {
					width: calc(100vw*(120/750));
					height: calc(100vw*(100/750));

					.buttom-item {
						width: calc(100vw*(120/750));

						height: calc(100vw*(60/750));
						font-size: 24rpx;
						font-weight: 500;

					}

					.nofollw {
						color: #FFFFFF;
						background: #1270E0;
					}

					.follw {
						color: black;
						background-color: #E7F0FC;
					}
				}

			}
		}
	}
</style>
